<template>
  <el-cascader
    v-model:value="value"
    style="width: 100%"
    :field-names="fieldNames"
    :options="options"
    :placeholder="title"
    @change="change"
  />
</template>

<script setup>
import { ref } from 'vue'
import cityJson from './city-china.json'
defineProps({
  title: {
    type: String,
    default: '请选择地址',
  },
  fieldNames: {
    type: Object,
    default: () => ({ label: 'text', value: 'text', children: 'children' }),
  },
})
const emit = defineEmits(['update:value'])

// 定义数据
const value = ref(undefined)
const options = ref(cityJson)
const change = (value) => {
  console.log(value)
  emit('update:value', value)
}
console.log(cityJson)
</script>

<style lang="scss" scoped></style>
